<template>
  <el-drawer v-model="drawer" title="我的信息" :with-header="false">
    <div>
      <!-- <div style="font-size: 35px; margin-left: 40%; margin-bottom: 50px">
      <el-icon><Bell /></el-icon>我的消息
    </div> -->
      <div style="margin-left: %; margin-right: 20%">
        <el-scrollbar style="">
          <el-timeline style="max-height: 700px">
            <el-timeline-item
              v-for="(notice, index) in notices"
              :key="index"
              :timestamp="notice.createtime"
              :color="colors[notice.isRead % 2]"
              placement="top"
            >
              <el-card style="width: 800px; height: 100px">
                <div style="font-size: 16px">{{ notice.content }}</div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "UserNotice",
  data() {
    return {
      drawer: false,
      colors: ["Grey", "Green"],
      notices: [
        {
          content: "贾宋帝近期奇偶就请我i第九期哦覅飞机",
          time: new Date().getTime() - 60 * 3 * 1000,
          isRead: 0,
        },
        {
          content: "贾宋帝近期奇偶就请我i第九期哦覅飞机",
          time: new Date().getTime() - 60 * 3 * 1000,
          isRead: 1,
        },
        {
          content: "贾宋帝近期奇偶就请我i第九期哦覅飞机",
          time: new Date().getTime() - 60 * 3 * 1000,
          isRead: 1,
        },
        {
          content: "贾宋帝近期奇偶就请我i第九期哦覅飞机",
          time: "江东区的黑我i七点九二七",
          isRead: 0,
        },
        {
          content: "贾宋帝近期奇偶就请我i第九期哦覅飞机",
          time: "江东区的黑我i七点九二七",
          isRead: 0,
        },
        {
          content: "贾宋帝近期奇偶就请我i第九期哦覅飞机",
          time: "江东区的黑我i七点九二七",
          isRead: 0,
        },
      ],
    };
  },
};
</script>

<style scope></style>
